<%@ page language="java" contentType="text/html; charset=utf8" pageEncoding="utf8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" href="resources/css/jquery-ui.css" 		rel="stylesheet" />
	<link type="text/css" href="resources/css/flexigrid.css" 		rel="stylesheet">
	<link type="text/css" href="resources/css/main.css" 			rel="stylesheet"/>
	<link type="text/css" href="resources/css/ui.jqgrid.css"  media="screen" 	rel="stylesheet" />
	
	<script type="text/javascript" src="resources/jquery.min.js"></script>
	<script type="text/javascript" src="resources/jquery-ui.min.js"></script>
	<script type="text/javascript" src="resources/flexigrid.js"></script>
	
	<script type="text/javascript" src="resources/i18n/grid.locale-en.js" ></script>
	<script type="text/javascript" src="resources/jquery.jqGrid.src.js" ></script>
	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="resources/jquery.ui.map.full.min.js" ></script>	
	<script type="text/javascript" src="resources/jquery.i18n.min.js"></script>
	<title>Заказы он-лайн</title>
<script type="text/javascript">
		/* ---------------------------------------------- */
var currentItemId;
var currentRowData;




$(document).ready(function(){ 

	/* ------------------ GRID FUNCTION ----------------- */	
  $("#listPublic").jqGrid({
	jsonReader : {
	      root:"rows",
	      page: "page",
	      total: "total",
	      records: "records",
	      repeatitems: false,
	      id: "0"
	   },	  
    url:'public/registry',
    datatype: 'json',
    mtype: 'POST',
    ondblClickRow: function(rowid){showItemCard(rowid);},
    colNames:['#','Инв.№', 'Носитель №','Фото','Тип носителя','','Регион','Нас. пункт', 'Адрес', 'Описание расположения','Статус', 'Цена','Ширина','Высота','Размеры','3'],
    colModel :[ 
      {name:'id', 					index:'id', 				width:10}, 
      {name:'inventarNr', 	   		index:'inventarNr', 		width:40, align:'left' , hidden:true, search:true},
      {name:'supportNr',			index:'supportNr', 			width:50, align:'center',  hidden:true},
      {name:'photo', 				index:'photo',				width:120, 
    	  formatter: photoFormatter, sortable:false },      
      {name:'supportTypeName',		index:'supportTypeName',	width:90, align:'center'},
      {name:'light', 				index:'light',				width:25, align:'center',
    	  formatter: lightFormatter, sortable:false, fixed:true },
      {name:'regionName', 			index:'regionName', 		width:90, align:'left'}, 
      {name:'localityName', 		index:'localityName', 		width:110, align:'left'}, 
      {name:'adress', 				index:'adress',				width:150, align:'left', sortable:false},
      {name:'locationDescription', 	index:'locationDescription',width:250},
      {name:'status', 				index:'status',				width:30,  hidden:true },
      {name:'price_base', 			index:'price_base',			width:45, 
	  		formatter: priceFormatter , align:'center' },
      {name:'width', 				index:'width',				width:45, sortable:false, hidden:true},
      {name:'height', 				index:'height',				width:45, sortable:false, hidden:true},
      {name:'dimension', 			index:'dimension',			width:70, sortable:false, fixed:true,
    	  	formatter: dimensionFormatter},
      {name:'firstFreeDate', 				index:'firstFreeDate',	width:80, sortable:false, hidden:true}      
    ],
    pager: '#pager',
    toppager: true,
    altRows: false,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    autowidth: true,
    height: 'auto',
    caption: 'Рекламные площади',
    search: true,
    postData: 	{ filters:{	supportType:		function() { return $('#pSupportType').val(); }, 
						   	regionName: 		function() { return $('#pRegionName').val(); },
						   	localityName: 		function() { return $('#pLocalityName').val(); },
							addresString: 		function() { return $('#pAddresString').val(); },
						 	light: 				function() { return $('#pLight').is(':checked'); },
						 	priceFrom: 			function() { return $('#pPriceFrom').val(); },
						 	priceTo: 			function() { return $('#pPriceTo').val(); }
							}
				}
  }); 
  
  function photoFormatter(cellvalue, options, rowObject) {
	      return "<img src='images/small/" + rowObject['inventarNr'] + "' width='120' alt='Photo' title='PHOTO' />";
	  };   
  
  function priceFormatter(cellvalue, options, rowObject) {
      return cellvalue + " \u20AC";
  };   	  
  
  function lightFormatter(cellvalue, options, rowObject) {
	  if (rowObject['light']){
		  return "<img src='resources/icons/lightbulb_on.png' width='14' alt='+' title='+' />";
	  }  else {
		  return "<img src='resources/icons/lightbulb.png' width='14' alt='-' title='-' />";
	  }
  };  
  
  function dimensionFormatter(cellvalue, options, rowObject) {
	  return rowObject['width'] + 'm.X' + rowObject['height']+'m.';
  };       
  
  /* ------------------ FILTERS FUNCTION ----------------- */	  
 	
	$("#btResetFilter").click(function(){
		$("#pSupportType").val("");
		$("#pRegionName").val("");
		$("#pLocalityName").val("");
		$("#pAddresString").val("");
		$("#pLight").attr('checked', false);
		$("#pPriceFrom").val("");
		$("#pPriceTo").val("");
		
		$("#listPublic").trigger("reloadGrid");
	});
	
	$("#btApplyFilter").click(function(){
		$("#listPublic").trigger("reloadGrid");
	});
	
	// Add AUTOCOMPLETE functionality for filters panel
	
	 $("#pRegionName").autocomplete(
		       {
		           source : function(request, response) {
		               $.ajax({
		                   url : "public/distinct/region",
		                   dataType : "json",
		                   data : {
		                	   style: "full",
		                        maxRows: 12,
		                	   term : request.term
		                   },
		                   success : function(data) {
		                       response($.map(data , function(item) {
		                           return {
		                               label : item.regionName,
		                               value : item.regionName
		                           }
		                       }));
		                   }
		               });
		           },
		           minLength : 0
		       }).focus(function(e) {
		    	    if(!e.isTrigger) {
		    	    	$(this).autocomplete("search", "");
		    	    }
		    	    e.stopPropagation();
		       });			
	
	 
	 $("#pLocalityName").autocomplete(
		       {
		           source : function(request, response) {
		               $.ajax({
		                   url : "public/distinct/locality",
		                   dataType : "json",
		                   data : {
		                       term : request.term
		                   },
		                   success : function(data) {
		                       response($.map(data , function(item) {
		                           return {
		                               label : item.localityName,
		                               value : item.localityName
		                           }
		                       }));
		                   }
		               });
		           },
		           minLength : 0
		       }).focus(function(e) {
		    	    if(!e.isTrigger) {
		    	    	$(this).autocomplete("search", "");
		    	    }
		    	    e.stopPropagation();
		       });
	 
	 $("#pSupportType").autocomplete(
		       {
		           source : function(request, response) {
		               $.ajax({
		                   url : "public/distinct/supportType",
		                   dataType : "json",
		                   data : {
		                       term : request.term
		                   },
		                   success : function(data) {
		                       response($.map(data , function(item) {
		                           return {
		                               label : item.supportTypeName,
		                               value : item.supportTypeName
		                           }
		                       }));
		                   }
		               });
		           },
		           minLength : 0
		       }).focus(function(e) {
		    	    if(!e.isTrigger) {
		    	    	$(this).autocomplete("search", "");
		    	    }
		    	    e.stopPropagation();
		       });

//Add AUTOCOMPLETE functionality for filters panel



// Item Card Functionality  
	  function showItemCard(rowId) {
		
		var rowData = $("#listPublic").getRowData(rowId);
		var colData = rowData['locationDescription'];
		
		//$("#cardLocationDescription").val(colData);
		//alert("colData = " + colData);
		
		currentItemId = rowId;
		currentRowData = rowData;
		$( "#itemDetail" ).dialog( "open" );
	  };

	  $(function() {
	      $( "#itemDetail" ).dialog({
	          autoOpen: false,
	          height: 600,
	          width: 	900,
	          resizable: false,
	          modal: true,
	          buttons: {
	              "Добавить в корзину": 	function() {
	            	  addToBasket(this);
	              	//$( this ).dialog( "close" );
	              }
	          },
	          close: function() {
	              allFields.val( "" ).removeClass( "ui-state-error" );
	          },
	          open: function(){
	              //var note_text = $('#pRegionName').attr('type');
	              $("#cardItemId").html(currentRowData['id']);
	              $("#cardInventarNr").html(currentRowData['inventarNr']);
	              $("#cardSupportType").html(currentRowData['supportTypeName']);
	              $("#cardLight").html(currentRowData['light']);             
	              $("#cardWidthHeight").html(currentRowData['width'] + "m.X" + currentRowData['height'] + "m.");
	              $("#cardPriceBase").html(currentRowData['price_base']);
	              $("#cardRegionName").html(currentRowData['regionName']);	 
	              $("#cardLocalityName").html(currentRowData['localityName']);
	              $("#cardAdress").html(currentRowData['adress']);

	              $("#cardLocationDescription").html(currentRowData['locationDescription']);
	              $("#cardFirstFreeDate").html(currentRowData['firstFreeDate']);
	              
	              $("#cardTitle").html(currentRowData['inventarNr'] + "  &nbsp;&nbsp;&nbsp;&nbsp;" + 
	             		 			  currentRowData['supportTypeName'] + "  &nbsp;&nbsp;&nbsp;&nbsp;" +
	             		 			  currentRowData['width'] + "m.X" + currentRowData['height'] + "m.  &nbsp;&nbsp;&nbsp;&nbsp;" +
	             		 			  currentRowData['light'] + "  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
	             		 			  currentRowData['price_base'] + "  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
	             		 			  currentRowData['firstFreeDate']);
	              
	              $("#cardLocation").html(currentRowData['localityName'] + "  " + 
	 		 			  				 currentRowData['adress']);
	              
	              $("#cardPhoto").attr('src',"images/big/" + currentRowData['inventarNr']);
	              $("#map_canvas").gmap({ 'center': '47.013388,28.837698', 'zoom': 17 });
	             
	          }
	      });
	});



}); 
		
</script>	
</head>


<body>
	<div id="header">
	  <div class="center">
	    <div id="logo">
	    <a href="#">STANDART</a>
	    </div>
	    <span style="float: right">
	    <table summary="main menu" cellpadding="0" border="0" cellspacing="0" class="ThemeMenuBar1MenuOuter">
			<tbody>
			<tr>
				<td><table class="ThemeMenuBar1Menu" cellspacing="0" cellpadding="0" border="0">
					<tbody><tr class="ThemeMenuBar1MainItem">
						<td class="ThemeMenuBar1MainItemText">
						<a href="http://www.standart.md/">
						<img width="32" src='resources/icons/home.png'  />
						</a>
						<a href="http://www.standart.md/contact.php">
						<img width="32" src='resources/icons/mail.png'  />
						</a>
						</td>
					</tr>
					</tbody>
					</table>
				</td>
				<td><table class="ThemeMenuBar1Menu" cellspacing="0" cellpadding="0" border="0">
					<tbody><tr>
						<td>
						  <a href="loginRU.jsp?language=ru"><img width="32" src='resources/icons/flag_russia.png'  /></a> 
    					  <a href="login.jsp?language=ro"><img width="32" src='resources/icons/flag_moldova.png' /></a>
						</td>
					</tr>
					</tbody>
					</table>
				</td>	
			</tr></tbody></table>	
		</span>
	  </div>
	</div>
	
	<c:if test="${not empty param.error}">
		<font color="red"> <spring:message code="label.loginerror" />
		: ${sessionScope["SPRING_SECURITY_LAST_EXCEPTION"].message} </font>
	</c:if>
	
	
<!-- BEGIN Login Form Declaration	 -->
	<div align="right">
		<form method="POST" action="<c:url value="/j_spring_security_check" />">
			<table>
				<tr>
					<td align="right">Логин:</td>
					<td><input type="text" name="j_username" /></td>
					<td align="right">Пароль:</td>
					<td><input type="password" name="j_password" /></td>
					<td  align="right"><input type="submit" value="Логин" />
				</td>	
				<tr>	
					<td> &nbsp;</td>
					<td align="right">Запомнить меня</td>
					<td><input type="checkbox" name="_spring_security_remember_me" /></td>
					<td> <a href="<c:url value="/registration_ru" />">
							Регистрация
						</a>
					</td>
					<td><input type="reset" value="Сброс" /></td>
				</tr>
			</table>
		</form>
	</div>
<!-- END Login Form Declaration	 -->
<div class="ui-jqgrid ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix"
			style="padding: .2em .2em .2em .2em;" >
	<span class="ui-jqgrid-title" style="font-size: 0.9em;">
	
	Параметры фильтрации
	
	</span>
</div>
<div id="filtrationPanel" class="ui-userdata ui-state-default" style="padding: .2em .2em .2em .2em;">
	<table id="prm" style="width: 100%">
		<tr>
			<td align="right">Тип носителя:</td>
			<td><input type="text" id="pSupportType" class="ui-widget"></td>
			<td>&nbsp;</td>
			<td align="right">Район:</td>
			<td><input type="text" id="pRegionName" class="ui-widget" ></td>
			<td>&nbsp;</td>
			<td align="right">Нас.пункт:</td>
			<td colspan="2">
				<input type="text" id="pLocalityName"  class="ui-widget" >
				</td>
<!-- 						<td>&nbsp;</td> -->
			<td align="right">&nbsp;</td>
			<td><input id="btApplyFilter" type="button" value="Отфильтровать"></td>
		</tr>
		<tr>
			<td align="right">Освещение:</td>
			<td><input type="checkbox" id="pLight" ></td>						
			<td>&nbsp;</td>
			<td align="right">Адрес:</td>
			<td><input type="text" id="pAddresString" class="ui-widget"></td>
			<td>&nbsp;</td>
			<td align="right">Цена:</td>
			<td>
				<input type="text" id="pPriceFrom" class="ui-widget" >
				<input type="text" id="pPriceTo"   class="ui-widget" >
			</td>
			<td>&nbsp;
				
			</td>
			<td align="right">&nbsp;</td>
			<td><input id="btResetFilter" type="button" value="Очистить фильтр"></td>
		</tr>	

	</table> 
</div>
<br>
<center>
	<div style="width: 95%;" class="ui-jqgrid">
		<table id="listPublic"><tr><td/></tr></table>
		<div id="pager"></div>
	</div>
</center>

<div id="itemDetail" title="Детали рекламной площади" style="font-size: 0.9em;">
	<table style="width: 100%;">
		<tr><td colspan="2"><div id="cardTitle" align="left" ></div></td></tr>
		<tr><td colspan="2"><div id="cardLocation" align="left" ></div></td></tr>		
		<tr>
			<td><a> <img id="cardPhoto" src='' width="500" alt='Photo' title='PHOTO' /></a></td>
			<td>
			<div id="cardItemId" hidden="hidden" ></div>
			<div id="map_canvas" style="width:350px;height:350px"></div>
			</td>		
		</tr>
		
		<tr><td colspan="2" align="left">Описание расположения :		</td></tr>
		<tr><td colspan="2"><div id="cardLocationDescription"></div></td></tr>
	</table>
</div>
	
</body>
</html>